﻿<UserControl x:Class="NotWindowsStoreMetro.GroupedCollectionPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">

  <UserControl.Resources>
    <CollectionViewSource x:Name="GroupedCollectionViewSource" x:Key="GroupedCollectionViewSource" />

    <ItemsPanelTemplate x:Key="GridItemsPanelTemplate">
      <StackPanel Orientation="Horizontal" Margin="120,0,0,0" />
      <!-- Workaround: this should be a virtualizing stack panel but it currently fails when switching between view states
      <VirtualizingStackPanel Orientation="Horizontal" Margin="120,0,0,0" VirtualizationMode="Recycling"/> -->
    </ItemsPanelTemplate>
  </UserControl.Resources>

  <!--Page Content -->

  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="OrientationStates">
        <VisualState x:Name="Full" />
        <VisualState x:Name="Fill" />
        <VisualState x:Name="Portrait" />
        <VisualState x:Name="Snapped">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="BackButton">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapBackButtonStyle}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PageTitle">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapPageTitleStyle}"/>
            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemGridView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
      <RowDefinition Height="140"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Standard title area -->
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Button x:Name="BackButton" Style="{StaticResource BackButtonStyle}"/>
      <TextBlock x:Name="PageTitle" Text="{StaticResource AppName}" Grid.Column="1" Style="{StaticResource PageTitleStyle}" />
    </Grid>

    <!-- List style presentation only used in "snapped" view state -->
    <ListView x:Name="ItemListView" Grid.Row="1" Visibility="Collapsed" ItemsSource="{Binding Source={StaticResource GroupedCollectionViewSource}}"
              ItemTemplate="{StaticResource SnapListItemTemplate}" ItemContainerStyle="{StaticResource SnapListTileStyle}" ItemsPanel="{StaticResource SnapListItemsPanelTemplate}"
              Margin="6,0,6,0" BorderThickness="0" VerticalAlignment="Stretch" Background="{StaticResource PageBackgroundBrush}" SelectionChanged="ItemGridView_SelectionChanged">
      <ListView.GroupStyle>
        <GroupStyle>
          <GroupStyle.Panel>
            <ItemsPanelTemplate>
              <VariableSizedWrapGrid Orientation="Vertical"/>
            </ItemsPanelTemplate>
          </GroupStyle.Panel>
          <GroupStyle.HeaderTemplate>
            <DataTemplate>
              <TextBlock Margin="0,0,0,8" Style="{StaticResource LargeContentFontStyle}" Text="{Binding Name.Title}" PointerReleased="Header_PointerReleased"/>
            </DataTemplate>
          </GroupStyle.HeaderTemplate>
        </GroupStyle>
      </ListView.GroupStyle>
    </ListView>

    <!-- Grid presentation used in all other view states -->
    <GridView x:Name="ItemGridView" Grid.Row="1" ItemsSource="{Binding Source={StaticResource GroupedCollectionViewSource}}"
              ItemTemplate="{StaticResource GroupedItemTemplate}" ItemContainerStyle="{StaticResource GridTileStyle}" ItemsPanel="{StaticResource GridItemsPanelTemplate}"
              BorderThickness="0" VerticalAlignment="Stretch" Background="{StaticResource PageBackgroundBrush}" SelectionChanged="ItemGridView_SelectionChanged">
      <GridView.GroupStyle>
        <GroupStyle>
          <GroupStyle.Panel>
            <ItemsPanelTemplate>
              <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
            </ItemsPanelTemplate>
          </GroupStyle.Panel>
          <GroupStyle.HeaderTemplate>
            <DataTemplate>
              <TextBlock Margin="0,0,0,8" Style="{StaticResource LargeContentFontStyle}" Text="{Binding Name.Title}" PointerReleased="Header_PointerReleased"/>
            </DataTemplate>
          </GroupStyle.HeaderTemplate>
          
          <!-- Workaround: this is currently necessary to limit the number of items displayed to the available space -->

          <GroupStyle.ContainerStyle>
            <Style TargetType="GroupItem">
              <Setter Property="Template">
                <Setter.Value>
                  <ControlTemplate TargetType="GroupItem">
                    <Grid>
                      <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                      </Grid.RowDefinitions>
                      <ContentPresenter Grid.Row="0"/>
                      <ItemsControl x:Name="ItemsControl" Grid.Row="1" ItemsSource="{Binding GroupItems}" />
                    </Grid>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>
          </GroupStyle.ContainerStyle>
        </GroupStyle>
      </GridView.GroupStyle>
    </GridView>

    <ApplicationBar x:Name="ApplicationBar" VerticalAlignment="Bottom" Grid.Row="1" DismissMode="LightDismiss" TuckHeight="0">
        <Grid Margin="0,0,0,18">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,48,0">
                <StackPanel Margin="24,18,0,0" VerticalAlignment="Center" Width="72">
                    <Button x:Name="PreviousButton" Click="RefreshButton_Click" Style="{StaticResource AppBarButtonStyle}">
                        <Path Fill="White" Stretch="UniformToFill" Canvas.Left="9.269" Canvas.Top="12.263" Width="20.928" Height="15.477" Data="F1M16.5576,18.0596L22.7016,12.2626L17.7046,12.2626L9.4856,20.0176L17.6686,27.7396L22.6646,27.7396L16.5576,21.9766L30.4136,21.9766L30.4136,18.0596z"/>
                    </Button>
                    <TextBlock Text="Refresh" Style="{StaticResource AppBarTextStyle}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </ApplicationBar>
</Grid>
    
</UserControl>
